<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            #dot{
                height: 40px;
                width: 40px;
                background-color: brown;
                position: relative;
                left: 50%;
                top: 200px;
                border-radius: 50%;
                animation: x 1s;
                animation-timing-function: cubic-bezier(0.5, -800, 0.5, 800);
                animation-iteration-count: infinite;
            }
            @keyframes x {
                to{
                    transform: translateX(1px);
                }
            }
        </style>
	</head>
	<body>
        <div id="dot"></div>
	</body>
</html>
<script type="text/javascript">
	// document.onmousemove=function(evt){
	// 	var e = evt || event;
	// 	var son=document.createElement("div");
	// 	son.style.width="7px";
	// 	son.style.height="7px";
	// 	son.style.background="red"
	// 	son.style.position="absolute";
	// 	son.style.top=e.pageY+"px";
	// 	son.style.left=e.pageX+"px";
	// 	son.style.borderRadius="50%";

	// 	document.body.appendChild(son);
	// }
    const dot=document.querySelector("#dot");
    dot.addEventListener('animationiteration ',function(){
        console.log(event)
    })
    setInterval(()=>{
        console.log(dot);
        let x =  dot.getBoundingClientRect().left+18;
        let y = dot.getBoundingClientRect().top+18;
        createDot(x,y)
        console.log(x, y);
    },70)

    function createDot(x,y){
        var son=document.createElement("div");
		son.style.width="7px";
		son.style.height="7px";
		son.style.background="red"
		son.style.position="absolute";
		son.style.top=y+"px";
		son.style.left=x+"px";
		son.style.borderRadius="50%";
		document.body.appendChild(son);
    }


</script>